<!--<!DOCTYPE html>-->
<!--<html lang="ch-CN">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <title>div-上下左右移动</title>-->
<!--</head>-->
<!--<style>-->
<!--    body {-->
<!--        padding: 0;-->
<!--        margin: 0;-->
<!--        width: 100vw;-->
<!--        height: 100vh;-->
<!--        background-color: wheat;-->
<!--        font-size: 30px;-->
<!--        /*文本透明*/-->
<!--        /*text-decoration: none;*/-->
<!--        font-family: "华文楷体";-->
<!--        display: flex;-->
<!--        justify-content: space-around;-->
<!--        align-items: center;-->
<!--    }-->

<!--    #box1, #box3 {-->
<!--        width: 0;-->
<!--        height: 100vh;-->
<!--        border-left: black 1px solid;-->
<!--    }-->

<!--    #box2 {-->
<!--        background-color: grey;-->
<!--        width: 50px;-->
<!--        height: 50px;-->
<!--    }-->
<!--</style>-->
<!--<body>-->
<!--<div id="box1"></div>-->
<!--<div id="box2"></div>-->
<!--<div id="box3"></div>-->
<!--</body>-->
<!--<script>-->
<!--    var box2 = document.getElementById("box2")-->
<!--    var box1 = document.getElementById("box1")-->
<!--    var box3 = document.getElementById("box3")-->

<!--    function run() {-->
<!--        box2.style.position = "absolute"-->
<!--        // console.log(box2.style.left)-->
<!--        document.onkeydown=function (event) {-->
<!--            let code=event.keyCode-->
<!--            // console.log(code)-->
<!--            move(code)-->
<!--        }-->
<!--    }-->

<!--    function move(code) {-->
<!--        let speed=10-->
<!--        switch (code) {-->
<!--            case 37:-->
<!--                console.log(box2.offsetTop)-->
<!--                //左移动&ndash;&gt;-->
<!--                box2.style.left = box2.offsetLeft - speed + "px"-->
<!--                break;-->
<!--            case 38:-->
<!--                // 上移动-->
<!--                box2.style.top = box2.offsetTop - speed + "px"-->
<!--                break-->
<!--            case 39:-->
<!--                // 右移动-->
<!--                box2.style.left = box2.offsetLeft + speed + "px"-->
<!--                break;-->
<!--            case 40:-->
<!--                // 下移动-->
<!--                box2.style.top = box2.offsetTop + speed + "px"-->
<!--                break-->
<!--        }-->
<!--    }-->

<!--    run()-->
<!--</script>-->
<!--</html>-->
<!DOCTYPE html>
<html lang="ch-CN">
<head>
    <meta charset="UTF-8">
    <title>div-上下左右移动</title>
</head>
<style>
    body {
        width: 100vw;
        height: 100vh;
        background-color: wheat;
        font-size: 30px;
        /*文本透明*/
        /*text-decoration: none;*/
        font-family: "华文楷体";
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    #box1, #box3 {
        width: 0;
        height: 100vh;
        border-right: black 1px solid;
    }

    #box2 {
        background-color: grey;
        width: 50px;
        height: 50px;
        transition: all linear 0.1s;
    }
</style>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</body>
<script>
    // 主函数
    function key(box1) {
        // 设置计时器变量名
        let time
        let box = document.getElementById(box1)
        // 将box设置为相对定位
        box.style.position = "absolute"
        // box.style.left和top的值不设置为0默认就没有 box.style.left值的类型是字符型后面需要用parseInt取整
        document.onkeydown = function (event) {
            // 获取键盘按下按键的数值
            let num = event.keyCode
            // 定义移动初始速度
            let speed = 10
            // 每次按下按钮时清除计时器  防止计时器效果叠加
            clearInterval(time)
            // 开启计时器 设置为500毫秒循环一次
            time = setInterval(function () {
                // 调用移动函数
                move(num, box, speed)
                // 调用边线的函数将 box 和 计时器传过去
                linear(box, time)
            }, 50)
        }
    }

    // box不出边线的函数
    function linear(box, time) {
        // box1离body左侧的距离
        let linear_left = document.getElementById("box1").offsetLeft
        // box3离body左侧的距离
        let linear_right = document.getElementById("box3").offsetLeft
        // console.log(box.offsetLeft === linear_right- box.offsetWidth)
        //当box的左边框offsetLeft小于等于左边线的offsetLeft时box的offsetLeft就等于左边线的offsetLeft
        if (box.offsetLeft < linear_left) {
            box.style.left = linear_left + "px"
        }
        /*
                当box的右边框offsetLeft大于等于右边线的offsetLeft时box的offsetLeft就等于右边线的offsetLeft
             要使box右边框等于右边线就得要边线offsetLeft-box的宽度||box的offsetLeft+box的宽度
        */
        if (box.offsetLeft + box.offsetWidth > linear_right) {
            box.style.left = linear_right - box.offsetWidth + "px"
        }
        // 如果box的左边框offsetLeft等于左边线的offsetLeft时||如果box的右边框offsetLeft等于右边线的offsetLeft时清除计时器
        if (parseInt(box.style.left) === linear_left || parseInt(box.style.left) === linear_right - box.offsetWidth) {
            // +1是防止box重合左边线导致不能上下移动
            if (parseInt(box.style.left) === linear_left) {
                box.style.left = parseInt(box.style.left) + 1 + "px"
            }
            //-1是防止box重合右边线导致不能上下移动
            if (parseInt(box.style.left) === linear_right - box.offsetWidth) {
                box.style.left = parseInt(box.style.left) - 1 + "px"
            }
            clearInterval(time)
        }
    }

    // box移动函数
    function move(num,w,h, box, speed) {
        switch (num) {
            case 37:
                //左移动-->
                box.style.left = box.offsetLeft - speed + "px"
                break;
            case 38:
                // 上移动
                box.style.top = box.offsetTop - speed + "px"
                break
            case 39:
                // 右移动
                box.style.left = box.offsetLeft + speed + "px"
                break;
            case 40:
                // 下移动
                box.style.top = box.offsetTop + speed + "px"
                break
        }
    }

    // 函数调用
    key("box2")
</script>
</html>